<template>
  <div class="orderListRuleForm">

    <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline"
             style="margin-left:0px">
      <el-form-item label="当前日期:" prop="qunfa_name">
        {{ currentDate }}
      </el-form-item>
      <el-form-item label="选择日期" prop="add_time">
<!--        <el-date-picker-->
<!--            v-model="form.add_time"-->
<!--            type="daterange"-->
<!--            align="right"-->
<!--            size="mini"-->
<!--            unlink-panels-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            format="yyyy-MM-dd"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            :default-time="['00:00:00', '23:59:59']"-->
<!--            :picker-options="pickerOptions">-->
<!--        </el-date-picker>-->
        <el-date-picker
            v-model="form.add_time"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search" size="mini">搜索</el-button>
        <el-button @click="resetForm('form')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>


    <el-row class="demo-form-inline">
      <el-col class="client-demo" :span="5">
        <p>新增客户数 </p>
        <p style="text-align: center">{{ tableData.xzkhs }}</p>
        <p>累计客户数 </p>
        <p style="text-align: center">{{ tableData.ljkhs }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p>新增成交客户数</p>
        <p style="text-align: center">{{ tableData.xzcjkh }}</p>
        <p>累计成交客户数</p>
        <p style="text-align: center">{{ tableData.ljcjkh }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p>新增客户成交率</p>
        <p style="text-align: center">{{ tableData.xzkhcjl }}%</p>
        <p>累计客户成交率</p>
        <p style="text-align: center">{{ tableData.ljkhcjl }}%</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p>新增推广员</p>
        <p style="text-align: center">{{ tableData.xztgy }}</p>
        <p>累计推广员</p>
        <p style="text-align: center">{{ tableData.ljtgy }}</p>
      </el-col>
    </el-row>

    <el-row class="demo-form-inline">
      <el-col class="client-demo" :span="5">
        <p>新增一级推广</p>
        <p style="text-align: center">{{ tableData.xzyjtgy }}</p>
        <p>累计一级推广</p>
        <p style="text-align: center">{{ tableData.ljyjtgy }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p>新增二级推广</p>
        <p style="text-align: center">{{ tableData.xzejtgy }}</p>
        <p>累计二级推广</p>
        <p style="text-align: center">{{ tableData.ljejtgy }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 成交金额</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 成交金额</p>
        <p style="text-align: center">{{ tableData.xzcjje }}</p>
        <p>累计成交金额</p>
        <p style="text-align: center">{{ tableData.ljcjje }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 成交订单数</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 成交订单数</p>
        <p style="text-align: center">{{ tableData.xzcjdd }}</p>
        <p>累计成交订单数</p>
        <p style="text-align: center">{{ tableData.ljcjdd }}</p>
      </el-col>
    </el-row>

    <el-row class="demo-form-inline">
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 退款金额</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 退款金额</p>
        <p style="text-align: center">{{ tableData.xztkje }}</p>
        <p>累计退款金额</p>
        <p style="text-align: center">{{ tableData.ljtkje }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 退款率</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 退款率</p>
        <p style="text-align: center">{{ tableData.ttkl }}%</p>
        <p>累计退款率</p>
        <p style="text-align: center">{{ tableData.ztkl }}%</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 产生佣金</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 产生佣金</p>
        <p style="text-align: center">{{ tableData.tcsyj }}</p>
        <p>累计产生佣金</p>
        <p style="text-align: center">{{ tableData.zcsyj }}</p>
      </el-col>
      <el-col class="client-demo" :span="5">
        <p v-if="form.add_time === ''">{{ newTime }}月 提现金额</p>
        <p v-if="form.add_time !== ''">{{start}}-{{end}}月 提现金额</p>
        <p style="text-align: center">{{ tableData.ttxje }}</p>
        <p>累计提现金额</p>
        <p style="text-align: center">{{ tableData.ztxje }}</p>
      </el-col>
    </el-row>
  </div>


</template>

<script>


import {
  getPopuPanel,
} from "@/api/sell/popuPanel/popuPanel";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {dateFormat} from "@/utils";


export default {
  name: 'Live-Order',
  components: {
    Panle,
    PersButton,
    VueJsonExcel,
  },
  computed: {
    currentDate() {
      // return new Date().toLocaleDateString();
      return dateFormat(new Date(), 'yyyy-MM');
    },
    newTime() {
      return dateFormat(new Date(), 'MM');
    }
  },

  data() {
    return {

      tableData: {
        xzkhs: 0,
        ljkhs: 0,
        xzcjkh: 0,
        ljcjkh: 0,
        xzkhcjl: 0,
        ljkhcjl: 0,
        xztgy: 0,
        ljtgy: 0,
        xzyjtgy: 0,
        ljyjtgy: 0,
        xzejtgy: 0,
        ljejtgy: 0,
        xzcjje: 0,
        ljcjje: 0,
        xzcjdd: 0,
        ljcjdd: 0,
        xztkje: 0,
        ljtkje: 0,
        ttkl: 0,
        ztkl: 0,
        tcsyj: 0,
        zcsyj: 0,
        ttxje: 0,
        ztxje: 0,
      },
      number: 0,
      name: '',
      status: '',
      date: '',
      form: {
        add_time: '',
        default_time: '',
      },
      start: '',
      end: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上一周',
            onClick(picker) {
              const current = new Date();
              const start_day = current.getDate() - current.getDay() - 6;
              const end_day = current.getDate() - current.getDay();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month + start_day).getTime());
              end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
    }
  },
  created() {
    this.init(true);
  },
  methods: {
    hasPermission,
    isShow,
    init() {
      this.loading = true;
      if (this.form.add_time == '' || this.form.add_time == undefined || this.form.add_time == null) {
        this.form.default_time = dateFormat(new Date(), 'yyyy-MM');
      }else {
        this.form.default_time = '';
        this.start = dateFormat(new Date(this.form.add_time[0]) , 'MM');
        this.end = dateFormat(new Date(this.form.add_time[1]), 'MM');
      }
      getPopuPanel(this.form).then((res) => {
        this.tableData.xzkhs = res.data.xzkhs;
        this.tableData.ljkhs = res.data.ljkhs;
        this.tableData.xzcjkh = res.data.xzcjkh;
        this.tableData.ljcjkh = res.data.ljcjkh;
        this.tableData.xzkhcjl = res.data.xzkhcjl;
        this.tableData.ljkhcjl = res.data.ljkhcjl;
        this.tableData.xztgy = res.data.xztgy;
        this.tableData.ljtgy = res.data.ljtgy;
        this.tableData.xzyjtgy = res.data.xzyjtgy;
        this.tableData.ljyjtgy = res.data.ljyjtgy;
        this.tableData.xzejtgy = res.data.xzejtgy;
        this.tableData.ljejtgy = res.data.ljejtgy;
        this.tableData.xzcjje = res.data.xzcjje;
        this.tableData.ljcjje = res.data.ljcjje;
        this.tableData.xzcjdd = res.data.xzcjdd;
        this.tableData.ljcjdd = res.data.ljcjdd;
        this.tableData.xztkje = res.data.xztkje;
        this.tableData.ljtkje = res.data.ljtkje;
        this.tableData.ttkl = res.data.ttkl;
        this.tableData.ztkl = res.data.ztkl;
        this.tableData.tcsyj = res.data.tcsyj;
        this.tableData.zcsyj = res.data.zcsyj;
        this.tableData.ttxje = res.data.ttxje;
        this.tableData.ztxje = res.data.ztxje;
      })
    },

    create: function () {
      this.open = true
    },

    search: function () {
      this.loading = true;
      this.init();
    },

    resetForm(formName) {
      this.form.add_time = '';
      this.init();
    },
  }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
  margin: 20px;

  .el-form-item {
    margin-bottom: 0;
  }
}

.el-form--inline .el-form-item {
  display: inline-block;
  vertical-align: top;
}

.orderListRuleForm .el-form-item {
  margin-bottom: 0;
}

.search-content {
  width: 100%;
  margin: 20px;
}

.yaoyue_neirong_content {
  display: flex;
}


.yaoyue_neirong_content_body {
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(180, 180, 180);
  padding: 10px;
  margin-left: 10px;
  width: 90%;
}

.yaoyue_neirong_content_title {
  width: 10%;
}

.yaoyue_neirong_content {
  width: 160%;
}

.client-demo {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin-left: 40px;
}

</style>